<template>
  <div class="container">
    <div class="resizable" ref="resizable">
      <div class="resize-handle" @mousedown="handleResize">
        <div class="a"></div>
      </div>

      <slot name="left"></slot>
    </div>
    <div class="right" ref="rightViewRef"><slot name="right"></slot></div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 获取可调整大小的 div 和拖拽手柄
const resizable = ref(null);
const rightViewRef = ref(null);

let isResizing = false; // 是否正在拖动
let lastX = 0; // 上一次鼠标位置

function handleResize(e) {
  isResizing = true;
  lastX = e.clientX; // 记录鼠标按下时的 X 坐标
  document.body.style.userSelect = "none"; // 禁止文本选择
}
// 监听鼠标移动事件，拖动时调整宽度
document.addEventListener("mousemove", (e) => {
  if (!isResizing) return;

  console.log(e);
  const offsetX = e.clientX - lastX; // 计算鼠标移动的距离
  const newWidth = resizable.value.offsetWidth + offsetX; // 计算新的宽度
  const newRWidth = rightViewRef.value.offsetWidth - offsetX
  resizable.value.style.width = `${newWidth}px`; // 更新宽度
  rightViewRef.value.style.width = `${newRWidth}px`; // 更新宽度
  lastX = e.clientX; // 更新鼠标位置
});

// 监听鼠标松开事件，结束拖动
document.addEventListener("mouseup", () => {
  isResizing = false;
  document.body.style.userSelect = ""; // 恢复文本选择
});
</script>

<style scoped>
/* 外层容器，设置宽度和高度 */
.container {
  width: 100%;
  height: 100%;
  background-color: lightgray;
  position: relative; /* 设置相对定位，以便定位子元素 */
  display: flex;
}

/* 可调整大小的 div */
.resizable {
  width: 300px;
  height: 100%;
  background-color: #fff;
  position: relative;

  cursor: ew-resize; /* 设置鼠标样式为水平拖动 */

  user-select: none;

  position: sticky;
  top: 0; /* 元素将粘在页面顶部 */
}

/* 右侧拖拽手柄 */
.resize-handle {
  width: 15px;
  height: 100%;
  transform: translateX(50%);
  position: absolute;
  right: 0;
  top: 0;
  cursor: ew-resize; /* 设置拖拽鼠标样式 */
  display: flex;
  justify-content: center;
  z-index: 99999;
}
.a {
  background-color: rgb(180, 167, 167);
  width: 1px;
  height: 100%;
}
.right{
    overflow-x: auto;
}
</style>